<script setup lang="ts">
import { onBeforeMount, watchEffect, ref, computed } from "vue";
import InspectTaskDetailOfPlan from "./InspectTaskDetailOfPlan.vue";
import InspectTaskDetailOfTemp from "./InspectTaskDetailOfTemp.vue";
import InspecktTaskCheckDetail from "./InspecktTaskCheckDetail.vue";
import CancelInspectTask from "./CancelInspectTask.vue";
import TaskFormPage from "./TaskFormPage.vue";
import { getTaskNoDetail } from "@/api/erc/inspectTask";
import { TASK_DETAIL_STATUS, TASK_RESULT_DETAIL_STATUS } from "../config";
import { queryWorkByRelatedOrderNum } from "@/api/erc/inspectTask";
import { useRoute } from "vue-router";
import dayjs from "dayjs";
const props = defineProps(["data"]);
const route = useRoute();
// 基础信息
const bacicData = ref<any>({});
// 巡检规则table
const tableData = ref([]);
//选择设备table
const tableEqiupSelected = ref([]);
// 维修工单table
const maintainTableData = ref([]);
const cancelInspectVisible = ref(false);
// 调用父级-返回主页、查询列表方法
const emits = defineEmits(["backMainPage"]);
// 返回主页面
const backMainPage = () => {
  emits("backMainPage");
};
const taskNo = computed(() => {
  const {
    query: { taskNo }
  } = route;
  if (taskNo) {
    return taskNo;
  } else {
    return props.data?.taskNo;
  }
});
// 取消任务
const handleCancel = () => {
  cancelInspectVisible.value = true;
};
const clearData = () => {
  bacicData.value = {};
  tableData.value = [];
  tableEqiupSelected.value = [];
};
// 获取维修工单详情
const getWorkByRelatedOrderNum = async () => {
  if (!taskNo.value) {
    return;
  }
  maintainTableData.value = [];
  const data = await queryWorkByRelatedOrderNum({
    maintenanceSource: "CHECK",
    relatedOrderNum: taskNo.value
  });
  maintainTableData.value = data;
};
// 获取任务详情
const getDetailByTaskNo = async () => {
  if (!taskNo.value) {
    return;
  }
  clearData();
  const data = await getTaskNoDetail(taskNo.value);
  const { eqpList, ruleDTOList, checkJobContentList, fileList, ...others } = data;
  const list =
    checkJobContentList?.map(item => {
      const checked = item.maintenanceWorkOrderList ? true : false;
      const eqpItem = eqpList?.find(eqp => eqp.eqpId === item.eqpId) || {};
      const { eqpId, eqpName, facCode, facName, positionNameAll, positionCode } = eqpItem;
      const defaultData = {
        eqpId,
        eqpName,
        facCode,
        eqpFacCodeDesc: facName,
        positionCode,
        positionCodeDesc: positionNameAll,
        workOrderName: `${dayjs().format("YYYY/MM/DD")}-${data.taskName}-${eqpName}`
      };
      return {
        ...item,
        checked,
        maintenanceWorkOrderList: item.maintenanceWorkOrderList || defaultData
      };
    }) || [];
  bacicData.value = {
    ...others,
    fileList: fileList || [],
    checkJobContentList: list
  };

  tableData.value = ruleDTOList || [];
  tableEqiupSelected.value = eqpList || [];
};
const initData = () => {
  getDetailByTaskNo();
  getWorkByRelatedOrderNum();
};
// 巡检任务详情——待执行/执行中/已取消——手动创建
const isViewOfTemp = computed(() => {
  const { taskStatus, taskType } = bacicData.value;
  const flag = TASK_DETAIL_STATUS.includes(taskStatus) && taskType === 2 && !isViewOfForm.value;
  return flag;
});
// 巡检任务详情——待执行/执行中/已取消——计划生成
const isViewOfPlan = computed(() => {
  const { taskStatus, taskType } = bacicData.value;
  const flag = TASK_DETAIL_STATUS.includes(taskStatus) && taskType === 1 && !isViewOfForm.value;
  return flag;
});
// 巡检任务详情——待审核/已完成
const isViewOfCheck = computed(() => {
  const { taskStatus } = bacicData.value;
  const flag = TASK_RESULT_DETAIL_STATUS.includes(taskStatus);
  return flag;
});
// 巡检任务详情——待执行/执行中——执行工单
const isViewOfForm = ref(false);
// 是否是从任务详情跳转到的下钻页
const isformTaskDetail = ref(false);
// 从任务详情跳转到的执行工单
const gotoTaskDetail = () => {
  isformTaskDetail.value = true;
  isViewOfForm.value = true;
};
onBeforeMount(() => {
  if (route.query.page === "form") {
    isViewOfForm.value = true;
  }
});
// takNo变化请求任务详情
watchEffect(() => {
  initData();
});
defineExpose({
  gotoTaskFormPage: () => {
    isViewOfForm.value = true;
    isformTaskDetail.value = false;
  }
});
</script>
<template>
  <div :class="`view-task-detail-page ${isViewOfForm ? 'view-task-detail-page-edit' : ''}`">
    <!-- 巡检任务详情——待执行——手动创建 -->
    <InspectTaskDetailOfTemp
      v-if="isViewOfTemp"
      v-bind="$attrs"
      :bacicData="bacicData"
      :tableData="tableData"
      :tableEqiupSelected="tableEqiupSelected"
      :maintainTableData="maintainTableData"
      @handleCancel="handleCancel"
      @gotoTaskDetail="gotoTaskDetail"
      @backMainPage="backMainPage"
    />
    <!-- 巡检任务详情——待执行——计划生成 -->
    <InspectTaskDetailOfPlan
      v-if="isViewOfPlan"
      v-bind="$attrs"
      :bacicData="bacicData"
      :tableData="tableData"
      :tableEqiupSelected="tableEqiupSelected"
      :maintainTableData="maintainTableData"
      @handleCancel="handleCancel"
      @gotoTaskDetail="gotoTaskDetail"
      @backMainPage="backMainPage"
    />
    <!-- 巡检任务详情——待执行——执行工单 -->
    <TaskFormPage
      v-if="isViewOfForm"
      v-model:isViewOfForm="isViewOfForm"
      v-bind="$attrs"
      :isformTaskDetail="isformTaskDetail"
      :bacicData="bacicData"
      @backMainPage="backMainPage"
      @refresh="initData"
    />
    <!-- 巡检任务详情——待审核/已完成——详情 -->
    <InspecktTaskCheckDetail
      v-if="isViewOfCheck"
      :tableData="tableData"
      :tableEqiupSelected="tableEqiupSelected"
      v-bind:="$attrs"
      :data="bacicData"
      :maintainTableData="maintainTableData"
      @backMainPage="backMainPage"
      @refresh="initData"
    />
    <!-- 取消任务 -->
    <CancelInspectTask v-if="cancelInspectVisible" v-model:dialogVisible="cancelInspectVisible" :data="bacicData" @refresh="initData" />
  </div>
</template>

<style lang="scss" scoped>
.view-task-detail-page {
  width: 100%;
  height: calc(100vh - 126px);
  padding: 0 24px;
  background-color: #fff;
  border-radius: 8px;

  &.view-task-detail-page-edit {
    height: calc(100vh - 180px);
  }
}

.view-task-detail {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;

  .view-task-title {
    display: flex;
    flex-direction: row;
    align-items: center;

    .text {
      margin-left: 20px;
      font-size: 20px;
      font-weight: 600;
      color: rgb(0 0 0 / 90%);
    }

    .status {
      display: flex;
      flex-direction: row;
      align-items: center;

      .circle {
        width: 8px;
        height: 8px;
        margin-right: 5px;
        margin-left: 8px;
        border-radius: 50%;
      }
    }
  }
}
</style>
